<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        const obj = {}
        obj[true] = 'Boolean'
        obj[1] = 'Number'
        obj[{ '前端': 'Sneaker' }] = '666'

        const a = Object.keys(obj)
        console.log(a) //  ["1", "true", "[object Object]"]

        // 顺便说一下Object.keys的作用

        // 1.处理对象，返回可枚举的属性数组
        let person = { name: "张三", age: 25, address: "深圳", getName: function () { } }
        const test = Object.keys(person)
        console.log(test) // ["name", "age", "address", "getName"]

        // 2.处理数组，返回索引值数组
        let arr = [1, 2, 3, 4, 5, 6]
        const test1 = Object.keys(arr)
        console.log(test1) // ["0", "1", "2", "3", "4", "5"]

        // 3.处理字符串，返回索引值数组
        let str = 'saasd'
        const test3 = Object.keys(str)
        console.log(test3) // ["0", "1", "2", "3", "4"]

        // 4.常用技巧
        const arr4 = []
        Object.keys(person).map(item => {
            arr4.push(person[item])
        })
        // person.forEach(item => {
        //     arr4.push(person[item])
        // }); // 报错 forEach是遍历数组对象的
        console.log(arr4) // ["张三", 25, "深圳", ƒ]

        // Object.values()和Object.keys()是相反的操作，把一个对象的值转换为数组
        const aaa = Object.values(person)
        console.log(aaa) // ["张三", 25, "深圳", ƒ]

        // Map的使用方法
        const map = new Map()
        map.set(1, 'value')
        map.set(true, 'value')
        map.set({ 'key': 'value' }, 'value')
        for (const key of map.keys()) {
            console.log(key) // 1 true {'key':'value'}
        }
        for (const value of map.values()) {
            console.log(value) // value value value
        }

        // 「Map」支持正则表达式作为键名，这在Object是不被允许的直接报错
        const map1 = new Map()
        map1.set(/^1[3456789]\d{9}$/, '手机号正则')
        console.log(map1) // Map(1) {/^1[3456789]\d{9}$/ => "手机号正则"}
        console.log(typeof map1) // Object


        // 「Map」 是可迭代的，可以直接进行迭代，例如forEach循环或者for...of...循环
        const map333 = new Map()
        map333.set('key1', 'value1')
        map333.set('key2', 'value2')
        map333.set('key3', 'value3')
        console.log(map333) // Map(3) {"key1" => "value1", "key2" => "value3", "key3" => "value3"}
        map333.forEach(item => {
            console.log(item) // value1 value2 value3
        })
        map333.forEach((key, value) => {
            console.log(key, value)
            // key1 value1
            // key2 value2
            // key3 value3
        })
        // for ... of
        for (const entry of map333) {
            console.log(entry)
            // ["key1", "value1"]
            // ["key2", "value2"]
            // ["key3", "value3"]
        }
        // 但是对于「Object」是不能直接迭代的，当你尝试迭代将导致报错
        const object = {
            key1: 'value1',
            key2: 'value2',
            key3: 'value3'
        }
        // for (const entry of object) {
        //     console.log(entry) // Uncaught TypeError: object is not iterable
        // }
        // 这时候你就需要一个额外的步骤来检索其键名、键值或者键值对
        for (const key of Object.keys(object)) {
            console.log(typeof key) // string
            console.log(key) // key1 key2 key3
        }

        for (const value of Object.values(object)) {
            console.log(value) // value1 value2 value3
        }

        for (const entry of Object.entries(object)) {
            console.log(entry)
            // ["key1", "value1"]
            // ["key2", "value2"]
            // ["key3", "value3"]
        }

        for (const [key, value] of Object.entries(object)) {
            console.log(typeof (key, value)) // string
            console.log((key, value))
            //"key1", "value1"
            //"key2", "value2"
            //"key3", "value3"
        }

        // 当然也可以使用for...in...进行遍历循环键名
        for (const key in object) {
            console.log(key)
            // key1
            // key2
            // key3
        }

        const object222 = {}
        object222['key1'] = 'value1'
        object222['key0'] = 'value2'
        console.log(object222) // {key1: "value1", key0: "value2"}
        object222[20] = 'value20'
        console.log(object222) // {20: "value20", key1: "value1", key0: "value2"} 乱序
        console.log(Object.keys(object222).length) // 3

        var map666 = new Map()
        map.set('key', 'value')
        console.log(JSON.stringify(map))  //"{}"

        var object666 = {key:'value'}
        console.log(JSON.stringify(object666)) // {"key":"value"}

    </script>
</head>

<body>

</body>

</html>